<template>
  <div class="container">
    <el-form ref="ruleForm" :model="query"  label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码">
           {{query.identify}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位名称" >
              {{query.unitName}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="所属区域" >
           
                {{query.districtCode}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位地址">
                  {{query.unitAddress}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="配送品种" >
                  {{query.distributionVarieties}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配送范围">
                  {{query.distributionScope}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人">
                   {{query.contacts}}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="联系方式" prop="contactInformation">
                 {{query.contactInformation}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="进货信息">
               <div class="green" v-if="query.realNameBill === '1'">
              已对接上传进货信息
            </div>
            <div class="red" v-else>未对接上传进货信息</div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合格证明文件" >
                      <div class="green" v-if="query.certificationReport === '1'">
              已对接上传合格证明文件
            </div>
            <div class="red" v-else>未对接上传合格证明文件</div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="快检记录">
                   <div class="green" v-if="query.quickInspection === '1'">
              已对接上传快检记录
            </div>
            <div class="red" v-else>未对接上传快检记录</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否显示了解更多">
                <div class="green" v-if="query.showLearnMore === '1'">
              是
            </div>
            <div class="red" v-else>否</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="单位简介" prop="companyProfile">
            <div v-html="query.companyProfile"></div>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item label="原文链接" prop="noticeCategory">
        <el-input
          maxlength="50"
          v-model="query.noticeCategory"
          placeholder="请输入原文链接"
        ></el-input>
      </el-form-item>

      <el-form-item label="概要" prop="noticeSummary">
        <el-input
          maxlength="50"
          v-model="query.noticeSummary"
          placeholder="请输入概要"
        ></el-input>
      </el-form-item>
      <el-form-item label="公告内容" prop="noticeContent">
        <quill-editor
          :content="query.noticeContent"
          :options="editorOption"
          @change="onEditorChange($event)"
        />
      </el-form-item>
      <el-form-item label="相关附件">
        <el-upload
          :file-list="query.list"
          drag
          :action="$upload"
          :headers="$headers()"
          :on-preview="
            (e) => {
              $downloadFiles(e.fileUrl);
            }
          "
          :on-error="onError"
          :on-remove="onRemove"
          :before-remove="beforeRemove"
          multiple
          :on-success="success"
          :before-upload="
            (e) => {
              return $beforeAvatarUpload(e, 1);
            }
          "
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传world、excel、pdf文件，且不超过5M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="">
        <div class="form_button">
          <el-button type="primary" @click="submit(0)">仅保存</el-button>
          <el-button type="primary" @click="submit(1)">保存并下发</el-button>
        </div>
      </el-form-item> -->
      <el-form-item label="">
        <div class="form_button">
          <el-button  @click="$router.go(-1)">返回</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { supplierPromotionFormList,landSupplierPromotionForm } from "@/api/modules/enterprise";
export default {
  created() {
    this.getList();
  },
  data() {
    return {
      content: "",
      editorOption: {},
      areaList: [
        {
          value: "吴中区",
          label: "吴中区",
        },

        {
          value: "相城区",
          label: "相城区",
        },
        {
          value: "高新区",
          label: "高新区",
        },
        {
          value: "姑苏区",
          label: "姑苏区",
        },
        {
          value: "工业园区",
          label: "工业园区",
        },
        {
          value: "常熟市",
          label: "常熟市",
        },
        {
          value: "张家港市",
          label: "张家港市",
        },
        {
          value: "昆山市",
          label: "昆山市",
        },
        {
          value: "吴江区",
          label: "吴江区",
        },
        {
          value: "太仓市",
          label: "太仓市",
        },
        {
          value: "张家港保税区",
          label: "张家港保税区",
        },
      ],
      query: {
        certificationReport: "1",
        companyProfile: "",
        distributionVarieties: "",
        districtCode: "",
        quickInspection: "1",
        unitAddress: "",
        unitName: "",
        realNameBill: "1",
        identify: "",
        showLearnMore: "1",
        contacts: "",
        contactInformation: "",
      },
      rules: {
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactInformation: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        identify: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        unitName: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
        ],
        districtCode: [
          {
            type: "string",
            required: true,
            message: "请选择所属区域",
            trigger: "change",
          },
        ],
        unitAddress: [
          {
            required: true,
            message: "请输入单位地址",
            trigger: "blur",
          },
        ],
        distributionVarieties: [
          {
            required: true,
            message: "请输入配送品种",
            trigger: "blur",
          },
        ],
        distributionScope: [
          {
            required: true,
            message: "请选择配送范围",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getList() {
           landSupplierPromotionForm({
          params: this.$formValidate,
        }).then((res) => {
      supplierPromotionFormList({
        params:{
            id: this.$route.query.id,
        }
      }).then((res) => {
        this.query=res.data
      });
      });
    },
    // findById(id) {
    //   this.$http
    //     .findById({
    //       params: {
    //         id,
    //       },
    //     })
    //     .then((res) => {
    //       console.log(res.data);
    //       res.data.list.forEach((x) => {
    //         x.name = x.fileName;
    //       });
    //       this.query.creaeUnitId = res.data.creaeUnitId;
    //       this.query.creaeUnitName = res.data.creaeUnitName;
    //       this.query.id = res.data.id;
    //       this.query.noticeCategory = res.data.noticeCategory;
    //       this.query.noticeContent = res.data.noticeContent;
    //       this.query.noticeName = res.data.noticeName;
    //       this.query.list = res.data.list;

    //       this.query.noticeSummary = res.data.noticeSummary;
    //     });
    // },
  },
  // 监听属性
  watch: {},
  //实例销毁之前
  beforeDestroy() {
    sessionStorage.removeItem("notice");
  },
};
// query.area
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
  .checkbox {
    display: flex;
    .checkbox_last {
      margin-right: 15px;
    }
  }
  .form_button {
    text-align: right;
  }
  /deep/ .ql-container {
    font-size: 16px;
  }
}
</style>
